//引入公共样式
require("../../assets/js/commonCss");
require("./edit.less"); //引入自己的样式

//获取axios工具函数
const axios = require('../../utils/request')
axios.defaults.baseURL = 'http://fitness.h5.itsource.cn:3701'
    // 导入weui
require("weui"); //导入weui的css
let weui = require("weui.js"); //导入weui的js

//返回
document.querySelector("#goBack").addEventListener("click", function() {
    history.go(-1);
    // history.back();
});

// 设置全局变量
let proId = null; //省份id
let cityId = null; //省份id

// 个人信息数据进行回填(渲染)
axios.get("/api/user/info")
    .then(function(res) {
        // console.log(res.data);
        if (res.data.errno == 0) {
            let data = res.data.data;
            // 头像
            document.querySelector("#imgUrl").src = axios.defaults.baseURL + data.imgUrl;
            // 昵称
            document.querySelector("#nickName").value = data.nickName;
            // 性别
            if (data.gender || data.gender == 0) {
                //性别有值才渲染
                document.querySelector("#sexText").textContent =
                    data.gender == 0 ? "男" : "女";
            }

            // 生日
            if (data.birthday) {
                document.querySelector("#birthText").textContent = data.birthday;
            }

            // 省份
            if (data.provinceId) {

                // 给全局变量省份id赋值
                proId = data.provinceId;

                // 获取所有的省份
                axios.get("/api/shared/province")
                    .then(function(res) {
                        console.log(res.data.data);
                        // 根据省份id 查找到省份的名称  find
                        let obj = res.data.data.find(function(item) {
                            return item.id == data.provinceId;
                        });
                        console.log(obj.name);
                        document.querySelector("#pro").textContent = obj.name;
                    });


            }

            //城市
            if (data.cityId) {
                cityId = data.cityId; //给全局变量 城市id赋值

                // 获取某个省份下面的所有城市
                axios.get("/api/shared/city?provinceId=" + proId)
                    .then(function(res) {
                        console.log(res.data.data);
                        let obj = res.data.data.find(function(item) {
                            return item.id == data.cityId;

                        })
                        console.log(obj.name); //城市的名称
                        document.querySelector("#city").textContent = obj.name;
                    })

            }

            //个性签名
            if (data.sign) {
                document.querySelector("#sign").textContent = data.sign;
                document.querySelector("#curNum").textContent = data.sign.length;
            }

        } else if (res.data.errno == 10003) {
            weui.alert("请先登录", function() {
                location.href = "./login.html";
            });
        }
    });

//性别
document.querySelector("#sex").addEventListener("click", function() {
    weui.picker(
        [{
                label: "男",
                value: 0,
            },
            {
                label: "女",
                value: 1,
            },
        ], {
            //确定的时候触发
            onConfirm: function(result) {
                console.log(result);
                console.log(result[0].label);
                document.querySelector("#sexText").textContent = result[0].label;
            },
            title: "请选择性别",
        }
    );
});


// 生日
document.querySelector("#birth").addEventListener("click", function() {
    weui.datePicker({
        start: new Date().getFullYear() - 80, //起始年
        end: new Date().getFullYear(), //结束年
        // 确认的时候触发
        onConfirm: function(result) {
            console.log(result);
            let arr = result.map(function(item) {
                // 补零
                return item.value <= 9 ? "0" + item.value : item.value;
            });
            // 数组分割为字符串
            console.log(arr.join("-"));
            document.querySelector("#birthText").textContent = arr.join("-");
        },
        title: "请选择生日",
    });
});

// 省份
document.querySelector("#pro").addEventListener("click", function() {
    // 从后端获取所有的省份
    axios.get("/api/shared/province").then(function(res) {
        // console.log(res.data.data); //获取到了所有省份
        let data = res.data.data.map(function(item) {
            return { label: item.name, value: item.id };
        });
        console.log(data);
        weui.picker(data, {

            onConfirm: function(result) {
                console.log("省份id", result[0].value); //获取到了省份id

                proId = result[0].value; //给全局变量省份id赋值

                document.querySelector("#pro").textContent = result[0].label;

                // 把城市清空
                document.querySelector("#city").textContent = "请选择城市";
                cityId = null;
            },
            title: "请选择所在省份",
        });
    });

});

// 城市
document.querySelector("#city").addEventListener("click", function() {

    if (proId) {
        // 发送ajax,获取某个省份下面的所有城市
        axios.get("/api/shared/city?provinceId=" + proId)
            .then(function(res) {
                let data = res.data.data.map(function(item) {
                    return { label: item.name, value: item.id };
                });
                //   console.log(data);
                weui.picker(data, {
                    //确定的时候触发
                    onConfirm: function(result) {
                        // console.log(result[0].label);
                        document.querySelector("#city").textContent = result[0].label;

                        cityId = result[0].value; //给全局变量城市id赋值
                    },
                    title: "请选择城市",
                });
            });
    } else {
        weui.alert("请先选择省份");
        return
    }
});

// 头像上传
// 头像上传
document.querySelector("#uploadImg").addEventListener("change", function() {
    let fileList = this.files[0]; //上传图片的信息
    let fd = new FormData(); //创建了FormData对象

    fd.append("file", fileList);

    axios.post("/api/circles/uploadImg", fd)
        .then(function(res) {
            console.log(res.data);
            if (res.data.errno === 0) {
                //上传成功
                let url = res.data.data.url;
                document.querySelector("#imgUrl").src = axios.defaults.baseURL + url;
            }
        });
});
// 美化头像上传
document.querySelector("#imgUrl").addEventListener("click", function() {
    //点击图片去触发 input type="file"
    document.querySelector("#uploadImg").click();
});

// 保存信息
document.querySelector("#saveBtn").addEventListener("click", function() {
    // 当接口参数个数超过3个的时候,先保证参数正确之后,再去发ajax,调用接口

    // 参数
    let data = {
        // 昵称
        nickName: document.querySelector("#nickName").value,
        //性别
        gender: document.querySelector("#sexText").textContent == "男" ? 0 : 1,
        //省份id
        provinceId: proId,
        //城市id
        cityId: cityId,
        //生日
        birthday: document.querySelector("#birthText").textContent,
        //头像
        imgUrl: document
            .querySelector("#imgUrl")
            .src.replace(axios.defaults.baseURL, ""),
        //个性签名
        sign: document.querySelector("#sign").value,
    };
    console.log(data);

    axios.post("/api/user/changeInfo", data).then(function(res) {
        console.log(res.data);
        if (res.data.errno === 0) {
            weui.toast("保存数据成功", function() {
                location.href = "./mine.html";
            });
        } else {
            weui.alert("保存数据失败");
        }
    });
});


// 给个性签名添加一个input事件
document.querySelector("#sign").addEventListener("input", function() {
    // 获取输入内容的长度
    let num = this.value.length
    console.log(num);
    document.querySelector("#curNum").textContent = num;
})